<template>
  <div class="setting">
    <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" />
    <div class="setting-content">
      <div class="setting-content-tip">设备信息</div>
      <van-cell-group inset class="setting-content-cell">
        <van-cell
          class="setting-content-cell"
          title="设备编号"
          :value="$route.params.deviceInfo.id"
        />
        <van-cell title="设备版本" :value="version" />
      </van-cell-group>
      <div class="setting-content-tip">通用设置</div>
      <van-cell-group inset class="setting-content-cell">
        <van-cell
          @click="handleOnCellClick(item)"
          v-for="item in settingList"
          :key="item.id"
          class="setting-content-cell"
          center
          :title="item.name"
          :value="item.value"
          is-link
        />
      </van-cell-group>
      <van-popup v-model="showPicker" round position="bottom">
        <div
          class="setting-content-tip"
          style="text-align: center; color: #000"
        >
          {{ timeStep.title }}
        </div>
        <van-field label="分钟">
          <template #input>
            <van-stepper v-model="timeStep.min" min="0" max="9999" integer />
          </template>
        </van-field>
        <van-field label="秒">
          <template #input>
            <van-stepper v-model="timeStep.sec" min="0" max="59" integer />
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="onTimeConfirm"
            >确定</van-button
          >
        </div>
      </van-popup>
      <div class="setting-content-tip" style="text-align: center">
        数据更新时间：{{ lastTime }}
      </div>
    </div>
  </div>
</template>

<script>
import { stringToByte } from "@/utils/dateCon";
import { Dialog } from 'vant';
export default {
  data() {
    return {
      lastTime: "",
      version: "",
      paramsRes: "",
      showPicker: false,
      timeStep: {
        title: "",
        min: 0,
        sec: 0,
      },
      settingList: [
        {
          name: "施肥继电器工作时间间隔",
          value: "--",
          id: 0,
        },
        {
          name: "打药继电器工作时间间隔",
          value: "--",
          id: 0,
        },
        {
          name: "水泵施肥继电器工作时间",
          value: "--",
          id: 0,
        },
        {
          name: "水泵打药继电器工作时间",
          value: "--",
          id: 0,
        },
      ],
    };
  },
  watch: {
    paramsRes: {
      handler(newVal, oldVal) {
        this.dataConver(newVal);
      },
      deep: true,
    },
  },
  created() {
    this.paramsRes = this.$route.params;
    this.dataConver(this.paramsRes);
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onTimeConfirm() {
      var key = this.timeStep.title;
      var hex;
      var min = this.timeStep.min.toString(16).padStart(4,'0').toUpperCase()
      var sec = this.timeStep.sec.toString(16).padStart(2,'0').toUpperCase()
      console.log()
      switch (key) {
        case "施肥继电器工作时间间隔":
          hex = "A103"+min+"00"+sec+"1A"
          break;
        case "打药继电器工作时间间隔":
          hex = "A104"+min+"00"+sec+"1A"
          break;
        case "水泵施肥继电器工作时间":
          hex = "A105"+min+"00"+sec+"1A"
          break;
        case "水泵打药继电器工作时间":
          hex = "A106"+min+"00"+sec+"1A"
          break;
        default:
          break;
      }
      console.log(hex);
      var send = stringToByte(hex);
      this.$mqtt.publishHex(this.paramsRes.deviceInfo.mqttSub, send);
      this.showPicker=false
    },
    handleOnCellClick(e) {
      if (!this.paramsRes.mqttMsg.now) {
        Dialog.alert({
          title: "提示",
          message: "设备离线，无法操作",
        }).then(() => {
          // on close
        });
        return;
      }
      this.timeStep.title = e.name;
      this.showPicker = true;
      var min = e.value.substring(0, e.value.indexOf("分"));
      var sec = e.value.substring(
        e.value.indexOf("钟") + 1,
        e.value.indexOf("秒")
      );
      this.timeStep.min = Number(min);
      this.timeStep.sec = Number(sec);
      console.log(sec);
    },
    dataConver(newVal) {
      var data = newVal.mqttMsg;
      this.lastTime = data.time;
      this.version = data.version;
      this.settingList[0].value =
        data.shifeiTime.min + "分钟" + data.shifeiTime.sec + "秒";
      this.settingList[1].value =
        data.dayaoTime.min + "分钟" + data.dayaoTime.sec + "秒";
      this.settingList[2].value =
        data.shuibengShifeiTime.min +
        "分钟" +
        data.shuibengShifeiTime.sec +
        "秒";
      this.settingList[3].value =
        data.shuibengDayaoTime.min + "分钟" + data.shuibengDayaoTime.sec + "秒";
      // var logOr = newVal.mqttMsg.log;
      // logOr.forEach((element) => {
      //   var logitem = element.split(";");
      //   const item = {
      //     time: logitem[0],
      //     deviceName: logitem[1],
      //     state: logitem[2],
      //   };
      //   this.LogList.push(item);
      // });
      // console.log(this.LogList);
    },
  },
};
</script>

<style lang="scss" scoped>
.setting {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  position: absolute;
  &-content {
    &-tip {
      margin: 20px 20px 6px 26px;
      color: #fff;
    }
  }
}
</style>